import { useEffect, useState } from 'react';
import { getTime } from '../../Tools/getTime';
import { useRecoilState} from 'recoil';
import { isSec } from '../../store';
import style from './index.module.scss'
const TimeboxUi = (props) => {
    const { Time, Week, date } = props.data
    return (
        <div className={style.timebox}>
            {props.children}
            <div className={style.time}>{Time}</div>
            <div className={style.date}>{Week} {date}</div>
        </div>
    )
}


const Timebox = () => {
    const [secstate, setSecDispay] = useRecoilState(isSec)
    const [timedata, setTime] = useState(getTime(secstate))
    const { Time, Week, date } = timedata
    useEffect(() => {
        const 定时 = setTimeout(() => {
            // console.log(getTime());
            setTime(getTime(secstate))
        }, 100)
        return () => {
            clearTimeout(定时)
        }
    })
    return (
        <TimeboxUi data={{ Time, Week, date }} >
            <div className={style.button}
                onClick={() => { setSecDispay(!secstate) }}
            >
                {secstate ? "隐藏" : "显示"}秒数
            </div>
        </TimeboxUi>
    )
}

export default Timebox